<template>
  <el-card class="chart-card">
    <h3 class="chart-title">近 30 天活动创建趋势</h3>
    <div class="chart-container">
      <canvas ref="lineChartRef"></canvas>
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Chart, registerables } from 'chart.js';
import { getVoteTrend30d } from '@/api/business/dashboard';


Chart.register(...registerables);
const lineChartRef = ref(null);
let chartInstance = null;

onMounted(async () => {
  const res = await getVoteTrend30d();
  const data = res.data;
  const dates = data.map(item => item.date);
  const newCounts = data.map(item => item.newCount);

  // 蓝色填充渐变
  const ctx = lineChartRef.value.getContext('2d');
  const fillGradient = ctx.createLinearGradient(0, 0, 0, 300);
  fillGradient.addColorStop(0, 'rgba(22, 93, 255, 0.2)');
  fillGradient.addColorStop(1, 'rgba(22, 93, 255, 0)');

  chartInstance = new Chart(lineChartRef.value, {
    type: 'line',
    data: {
      labels: dates,
      datasets: [{
        label: '新增活动数',
        data: newCounts,
        borderColor: '#165DFF',
        borderWidth: 2,
        pointRadius: 3,
        pointBackgroundColor: '#165DFF',
        fill: true,
        backgroundColor: fillGradient,
        tension: 0.3 // 线条平滑度
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: { grid: { display: false } },
        y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' }, ticks: { stepSize: 1 } }
      }
    }
  });
});
</script>

<style scoped>
/* 样式同其他图表卡片 */
.chart-title { font-size: 16px; color: #333; margin-bottom: 10px; }

</style>